<template>
  <transition name="fade">
    <div class="storeData" v-show="show">
      <leftTop
        :leftTopData1="leftTopData1"
        :leftTopData2="leftTopData2"
      ></leftTop>
      <leftBottom
        :leftBottomData1="leftBottomData1"
        :leftBottomData2="leftBottomData2"
      ></leftBottom>
      <box
        width="1060px"
        height="398px"
        left="802px"
        top="192px"
        title="POP分布"
      >
        <div class="rightTop flex">
          <img
            src="../../assets/img/storeData/map-title.png"
            alt=""
            class="map-title"
          />
          <div class="chart" ref="chart"></div>
          <div class="table-wrap">
            <my-title top="0px" title="店铺排名 TOP 50"></my-title>
            <div class="table">
              <el-table
                  ref="tablepop"
                  :data="tableList"
                  height="316"
                  @cell-mouse-enter="mouseenter"
                  @cell-mouse-leave="mouseleave"
                  :header-cell-style="headClass"
                  :cell-style="cellClass"
              >
                <el-table-column label="排名" align="center" width="50" type="index">
                </el-table-column>
                <el-table-column
                    prop="channel"
                    align="center"
                    label="渠道"
                    width="60"
                ></el-table-column>
                <el-table-column
                    prop="pos"
                    align="center"
                    label="小微"
                    width="60"
                ></el-table-column>
                <el-table-column
                    prop="shop"
                    align="center"
                    label="店铺名称"
                    width="145"
                    title=""
                >
                  <template slot-scope="scope">
                    <span :title="scope.row.shop">{{ scope.row.shop | text }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="amount"
                    align="center"
                    label="支付金额"
                    width="95"
                >
                </el-table-column>
                <el-table-column prop="percent" align="center" label="占比"  width="50">
                  <template slot-scope="scope">
                    <span>{{ scope.row.percent }}%</span>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </div>
          <div class="total-wrap">
            <p class="value">{{ rightTopMapData.total }}</p>
            <label for="">小微总计</label>
          </div>
        </div>
      </box>
      <rightBottom
        :rightBottomData1="rightBottomData1"
        :rightBottomData2="rightBottomData2"
      >
      </rightBottom>
      <div class="close-btn" @click="close"></div>
    </div>
  </transition>
</template>

<script>
import leftTop from "./components/leftTop.vue";
import leftBottom from "./components/leftBottom.vue";
import rightBottom from "./components/rightBottom.vue";
import { queryStoreData } from "@/api/index";
import { geoCoordMap } from "@/utils/map";
export default {
  props: { interval: {} },
  components: {
    leftTop,
    leftBottom,
    rightBottom,
  },
  data() {
    return {
      show: false,
      leftTopData1: {},
      leftTopData2: {},
      leftBottomData1: {},
      leftBottomData2: {},
      rightTopMapData: {},
      tableList: [],
      rightBottomData1: {},
      rightBottomData2: {
        top: {
          name: "头部小微",
          list: [
            {
              name: "",
              val: 0,
            }
          ],
        },
        mid: {
          name: "中部小微",
          list: [
            {
              name: "",
              val: 0,
            }
          ],
        },
        bottom: {
          name: "薄弱小微",
          list: [
            {
              name: "",
              val: 0,
            }
          ],
        },
      },
      timer: null,
      scrollTimer: null,
      scrollTop: 0,
      scrollOpen:true,
    };
  },
  computed: {},
  watch: {
    rightTopMapData(newVal) {
      this.mapInit(newVal.list);
    },
    // scrollTop(newVal) {
    //   document.getElementById("tbody").scrollTop = newVal;
    // },
  },
  methods: {
    getData() {
      queryStoreData().then((res) => {
        this.leftTopData1 = res.leftTopData1;
        this.leftTopData2 = res.leftTopData2;
        this.leftBottomData1 = res.leftBottomData1;
        this.leftBottomData2 = res.leftBottomData2;
        this.rightTopMapData = res.rightTopMapData;
        this.tableList = res.rightTopList;
        this.rightBottomData1 = res.rightBottomData1;
        this.rightBottomData2 = res.rightBottomData2;
      });
      this.tableScrool()
    },

    headClass() {
      return "color: #33bbff; font-size: 14px;  height:14px;  border: 1px solid #164099;background: rgba(8,30,121,.4) !important; text-align: center;    color: #8fadcc;";
    },
    cellClass() {
      return "padding: 4px 0;text-align:center;height: 28px;border: 1px solid #091e4e; color:#fff; font-size:12px";
    },

    mouseenter() {
      this.scrollOpen = false
    },
    mouseleave() {
      this.scrollOpen = true
    },
    tableScrool(){
      //表格滚动事件
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.tablepop
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      clearInterval(this.scrollTimer)
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.scrollTimer = setInterval(() => {
        if (this.scrollOpen) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 2
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
            // 重置table距离顶部距离
              this.$nextTick(
                  divData.scrollTop = 0
              )
          }
        }
      }, 75)
    },
    findCity(name, data) {
      let res = data.find((item) => item.name == name);
      return [
        {
          name,
          value: geoCoordMap[name]
            .concat([res ? res.value : 0])
            .concat([res ? (res.amount / 10000).toFixed(1) + "W" : 0]),
        },
      ];
    },
    convertData(data) {
      var res = [];
      let _geoCoordMap = Object.entries(geoCoordMap);
      console.log(_geoCoordMap);
      for (var i = 0; i < _geoCoordMap.length; i++) {
        var geoCoord = data.find((item) => item.name == _geoCoordMap[i][0]);
        console.log(geoCoord);
        if (geoCoord) {
          res.push({
            name: geoCoord.name,
            value: _geoCoordMap[i][1]
              .concat([geoCoord.value])
              .concat([(geoCoord.amount / 10000).toFixed(1) + "W"]),
          });
        } else {
          res.push({
            name: _geoCoordMap[i][0],
            value: _geoCoordMap[i][1].concat([0]).concat([0]),
          });
        }
      }
      return res;
    },
    open() {
      console.log(66666);
      this.scrollOpen = true
      this.getData();
      this.show = true;
      this.timerInit();
    },
    close() {
      console.log(this.scrollTimer,'456');
      this.scrollOpen = false
      this.show = false;
      this.$emit("close");
      clearTimeout(this.timer);
      clearInterval(this.scrollTimer);
    },
    timerInit() {
      this.timer = setTimeout(() => {
        this.close();
      }, (this.interval / 2) * 1000);
    },
    mapInit(data) {
      let _chart = this.$echarts.init(this.$refs["chart"]);
      let option = {
        tooltip: {},
        geo: {
          map: "china",
          aspectScale: 0.75,
          layoutCenter: ["50%", "61.5%"], //地图位置
          layoutSize: "118%",
          roam: false,
          silent: true,
          tooltip: {
            show: false,
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 0.5,
              color: "#040983",
              opacity: 0.5,
            },
          },
          emphasis: {
            show: false,
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
              },
            },
          ],
          z: 2,
        },
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            tooltip: {
              show: false,
            },
            aspectScale: 0.75,
            layoutCenter: ["50%", "60%"], //地图位置
            layoutSize: "118%",
            silent: true,
            roam: false,
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 0.6)",
                borderWidth: 0.8,
                areaColor: "#031c93",
              },
            },
            zlevel: 1,
            data,
            emphasis: {
              show: false,
            },
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,

            tooltip: {
              show: true,
              backgroundColor: "rgba(0,0,0,0.5)",
              borderColor: "#00eaff",
              trigger: "item",
              formatter: (params) => {
                return `<span style='font-size:16px;color:#fff'>${params.name}</span><br/><span style='font-size:14px;color:#fff'>数量</span>：<span style='font-size:14px;color:#00eaff'>${params.value[2]}</span><br/><span style='font-size:14px;color:#fff'>金额</span>：<span style='font-size:14px;color:#00eaff'>${params.value[3]}</span>`;
              },
            },
            label: {
              emphasis: {
                show: false,
              },
            },
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              normal: {
                show: false,
                color: "#ffd400",
              },
            },
            data: this.convertData(data),
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              period: 15,
              scale: 5,
              brushType: "fill",
            },
            zlevel: 2,
            tooltip: {
              show: true,
              backgroundColor: "rgba(0,0,0,0.5)",
              borderColor: "#00eaff",
              trigger: "item",
              formatter: (params) => {
                return `<span style='font-size:16px;color:#fff'>${params.name}</span><br/><span style='font-size:14px;color:#fff'>数量</span>：<span style='font-size:14px;color:#00eaff'>${params.value[2]}</span><br/><span style='font-size:14px;color:#fff'>金额</span>：<span style='font-size:14px;color:#00eaff'>${params.value[3]}</span>`;
              },
            },
            label: {
              emphasis: {
                show: false,
              },
            },
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#00eaff",
              },
            },
            data: this.findCity("北京", data),
          },
        ],
      };
      _chart.setOption(option);
      _chart.dispatchAction({
        type: "showTip",
        seriesIndex: 2,
        dataIndex: 0,
      });
      _chart.on("click", (params) => {
        if (params.seriesIndex == 2 || params.seriesIndex == 1) {
          let _o = _chart.getOption();
          console.log(_o);
          _o.series[2].data = this.findCity(params.name, data);
          _chart.setOption(_o);
          _chart.dispatchAction({
            type: "showTip",
            seriesIndex: 2,
            dataIndex: 0,
          });
        }
      });
      _chart.on("mouseover", function () {
        _chart.dispatchAction({
          type: "downplay",
        });
      });
    },
  },
  created() {},
  filters: {
    text(val) {
      return val.length > 10 ? val.slice(0, 10) + "..." : val;
    },
  },
  mounted() {
    // setInterval(() => {
    //     document.getElementById("tbody").scrollTop += 5;
    // }, 1000);

    console.log('mounted');
  },
};
</script>
<style lang='less' scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.storeData {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../../assets/img/storeData/bg.png);
  z-index: 999;
  .close-btn {
    width: 85px;
    height: 89px;
    left: 1803px;
    top: 90px;
    cursor: pointer;
    position: absolute;
  }
  .rightTop {
    width: 100%;
    height: 100%;

    .map-title {
      position: absolute;
      top: 46px;
      left: 240px;
    }
    .total-wrap {
      position: absolute;
      width: 130px;
      height: 62px;
      left: 35px;
      bottom: 46px;
      background: url(../../assets/img/storeData/map-icon.png);
      padding-left: 60px;
      p {
        font-size: 20px;
        color: #33bbff;
        margin-top: 10px;
      }
      label {
        font-size: 14px;
      }
    }
    .chart {
      width: 580px;
      height: 360px;
    }
    .table-wrap {
      position: relative;
      height: 360px;
      flex: 1;
      .table {
        position: relative;
        width: 460px;
        height: 316px;
        // overflow-y: scroll;
        margin-top: 30px;
        border: 0px solid;

      }
    }
  }
}

/deep/ .el-table {
  background-color: transparent;
}
/deep/ .el-table tr {
  background-color: transparent !important;
}
/deep/ .el-table th {
  background-color: transparent !important;
}
// 隐藏滚动条样式
/deep/.el-table__body-wrapper::-webkit-scrollbar{
  width: 0;
}
/deep/ .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/deep/ .el-table .el-table__cell{
  padding: 5px 0;
}


/* 选中某行时的背景色*/
/deep/  .el-table--enable-row-hover .el-table__body tr:hover > td{
background-color: transparent !important;
}

</style>
